/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/9/21 7:51 下午
 * @version V1.0
 */
import React from 'react';
import { Card, Row, Col } from 'antd';
import { connect } from 'umi';
import styles from './index.less';

const ShopDetail = ({ ShopDetail: { shopDetail } }) => {
    return (
        <Card className={styles.detailContainer}>
            <Row>
                <Col span={8}>
                    <p className={styles.label}>店铺名称:</p>
                    <p className={styles.value}>{shopDetail.name}</p>
                </Col>
                <Col span={8}>
                    <p className={styles.label}>店铺负责人:</p>
                    <p className={styles.value}>{shopDetail.leader}</p>
                </Col>
                <Col span={8}>
                    <p className={styles.label}>联系方式:</p>
                    <p className={styles.value}>{shopDetail.phone}</p>
                </Col>
                <Col span={8}>
                    <p className={styles.label}>店铺地址:</p>
                    <p className={styles.value}>{shopDetail.address}</p>
                </Col>
                <Col span={8}>
                    <p className={styles.label}>店铺分类:</p>
                    <p className={styles.value}>{shopDetail.category_name}</p>
                </Col>
                <Col span={8}>
                    <p className={styles.label}>营业时间:</p>
                    <p className={styles.value}>{`${shopDetail.start_time}/${shopDetail.end_time}`}</p>
                </Col>
                <Col span={8}>
                    <p className={styles.label}>店铺描述:</p>
                    <p className={styles.value}>{shopDetail.description}</p>
                </Col>
                <Col span={8}>
                    <p className={styles.label}>品牌名称:</p>
                    <p className={styles.value}>{shopDetail.brand_name}</p>
                </Col>
                <Col span={8}>
                    <p className={styles.label}>促销信息:</p>
                    <p className={styles.value}>{shopDetail.promotion_info}</p>
                </Col>
            </Row>
            <Row>
                <Col span={8}>
                    <div className={styles.imgWrapper}>
                        <p className={styles.label}>店铺招牌:</p>
                        <p className={styles.imgContent}>
                            <img className={styles.img} src={shopDetail.shop_sign} alt=""/>
                        </p>
                    </div>
                </Col>
                <Col span={8}>
                    <div className={styles.imgWrapper}>
                        <p className={styles.label}>经营许可证:</p>
                        <p className={styles.imgContent}>
                            <img className={styles.img} src={shopDetail.business_license_image} alt=""/>
                        </p>
                    </div>
                </Col>
                <Col span={8}>
                    <div className={styles.imgWrapper}>
                        <p className={styles.label}>食品服务许可证:</p>
                        <p className={styles.imgContent}>
                            <img className={styles.img} src={shopDetail.catering_service_license_image} alt=""/>
                        </p>
                    </div>
                </Col>
                <Col span={8}>
                    <div className={styles.imgWrapper}>
                        <p className={styles.label}>品牌销售协议:</p>
                        <p className={styles.imgContent}>
                            <img className={styles.img} src={shopDetail.brand_sale_protocol_image} alt=""/>
                        </p>
                    </div>
                </Col>
            </Row>
        </Card>
    );
};

export default connect(({ ShopDetail, dispatch, loading }) => ({
    ShopDetail,
    dispatch,
    loading: loading.effects['ShopDetail/getShopDetail'],
}))(ShopDetail);
